<template>
  <div class="page">
    <Navbar title="报批指导" />
    <div class="bg">
      <van-tabs v-model="activeTab" color="#4B93FE" @change="onRefresh">
        <van-tab title="操作指南" :name="0" />
        <van-tab title="常见问题" :name="1" />
      </van-tabs>
      <div class="search-header">
      <van-search v-model="searchValue" placeholder="请输入您的搜索内容" @keydown.enter="getList"/>
    </div>
    </div>
    <div class="content">
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-empty v-if="!tableData.length" description="暂无数据" />
        <div class="new-list">
          <div
            v-for="(item,index) in tableData"
            :key="index"
            class="new-item f-r "
            @click="toDetail(item)"
          >
            <div class="f-g f-c j-b">
              <div class="title">{{ item.title }}</div>
              <div class="f-r a-e j-b">
                <div class="left">
                  <div class="date f-r a-c">
                    {{ item.author }}
                    <span class="time">{{ item.dateTime == null?'': item.dateTime.split(" ")[0] }}</span>
                  </div>
                </div>
              </div>
            </div>
            <img class="img" :src="item.file">

          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import navbar from '@/mixins/navbar'
import refresh from '@/mixins/refresh'
import { http_news } from '@/api'
export default {
  name: 'Consulting',
  mixins: [navbar, refresh],
  data() {
    return {
      activeTab: 0,
      searchValue: ''
    }
  },
  methods: {
    getList() {
      // 操作
      // this.tableData = []
      if (this.activeTab === 0) {
        http_news.page({
          ...this.getQueryParams(),
          title: this.searchValue
        }).then(res => {
          if (this.pageNo === 1) {
            console.log(this.tableData);
            this.tableData = res.data.records.map(el => {
              return {
                ...el
              }
            })
          } else {
            this.tableData = [
              ...this.tableData,
              ...res.data.records.map(el => {
                return {
                  ...el
                }
              })
            ]
            console.log(this.tableData);
          }
          this.totalSize = res.data.total
          this.refreshLoading = false
        })
      } else {
        // 问题
        http_news.problemPage({
          ...this.getQueryParams(),
          title: this.searchValue
        }).then(res => {
          if (this.pageNo === 1) {
            this.tableData = res.data.records.map(el => {
              return {
                ...el
              }
            })
          } else {
            this.tableData = [
              ...this.tableData,
              ...res.data.records.map(el => {
                return {
                  ...el
                }
              })
            ]
          }
          this.totalSize = res.data.total
          this.refreshLoading = false
        })
      }
    },
    toDetail(item) {
      this.$router.push({
        path: '/news-detail',
        query: {
          id: item.id,
          userId: item.userId,
          type: this.activeTab,
          vconsole: true
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
    width: 100vw;
    .el-select,
    .el-input {
        width: 100%;
    }
    .content {
        padding: 23px 16px;
    }
    .new-list {
        .new-item {
            padding: 14px;
            background-color: #fff;
            border-radius: 10px;
            margin-bottom: 20px;

            .title {
                margin-bottom: 13px;
                font-size: 16px;
                line-height: 16px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #333333;
            }

            .img {
                height: 100%;
                flex-shrink: 0;
                width: 80px;
                font-size: 10px;
                font-family: PingFang SC;
                font-weight: bold;
                color: #999999;
                margin-left: 12px;
            }
            .left {
                .new-name {
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #666666;
                    line-height: 22px;
                }
                .desc {
                    font-size: 10px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #999999;
                    margin-top: 8px;
                    margin-bottom: 8px;
                }
                .date {
                    font-size: 12px;
                    line-height: 12px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #999999;
                }
                .time {
                    margin-left: 12px;
                    font-size: 10px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #999999;
                }

            }
        }
    }

}
</style>
